<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('m.common.button.close')">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item :label="$t('m.eform.appgroup.entity.groupName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'groupName', validatorRules.groupName]" placeholder=""></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('m.eform.appgroup.entity.groupCode')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'groupCode', validatorRules.groupCode]" placeholder=""></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item :label="$t('m.eform.appgroup.entity.groupDesc')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'groupDesc', validatorRules.groupDesc]" placeholder=""></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('m.eform.appgroup.entity.orderNum')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="[ 'orderNum', validatorRules.orderNum]" placeholder=""
                              style="width: 100%"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" v-show="isShowParent">
            <a-form-item :label="$t('m.eform.appgroup.entity.parentId')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <ych-tree-select
                ref="treeSelect"
                placeholder=""
                v-decorator="['parentId', validatorRules.parentId]"
                dict="act_app_group,group_name,id"
                pidField="parent_id"
                pidValue="0"
                condition='{"group_type":"1"}'
              >
              </ych-tree-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :label="$t('m.eform.appgroup.entity.icon')">
              <ych-icon-select v-model="model.icon" write :iconfont="true"></ych-icon-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="isShowParent">
          <a-col :span="12">
            <a-form-item :label="$t('m.eform.appgroup.entity.backgroundColor')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
                <template slot="title">
                  {{ item.key }}
                </template>
                <a-tag :color="item.color" @click="changeColor(item.color)">
                  <ych-icon type="check" v-show="item.color == model.backgroundColor"></ych-icon>
                </a-tag>
              </a-tooltip>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('m.eform.appgroup.entity.isMobile')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <ych-switch v-decorator="[ 'isMobile', validatorRules.isMobile]"></ych-switch>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="isShowParent">

          <a-col :span="12">
            <a-form-item :label="$t('m.eform.appgroup.entity.isCommon')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <ych-switch v-decorator="[ 'isCommon', validatorRules.isCommon]"></ych-switch>
            </a-form-item>
          </a-col>
          <a-col :span="12">

          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </ych-modal>
</template>

<script>

  import {httpAction, getAction} from '@/api/manage';
  import YchTreeSelect from '@/components/ych/YchTreeSelect';
  import {EFormConstant} from "../EFormConstant";
  import YchConstant from "@/api/YchConstant";
  import {YchIconSelect, YchSwitch} from '@yuncheng/ych-components'

  export default {
    name: "ActAppGroupModal",
    components: {
      YchTreeSelect,
      YchIconSelect,
      YchSwitch
    },
    data() {
      return {
        form: this.$form.createForm(this),
        title: this.$t('m.common.label.operate'),
        visible: false,
        model: {},
        groupType: EFormConstant.groupType,
        labelCol: {
          xs: {span: 24},
          sm: {span: 6},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        validatorRules: {
          parentId: {},
          groupName: {rules: [{required: true, message: this.$t('m.eform.appgroup.verify.groupName') }]},
          groupCode: {rules: [{validator: this.checkCode},{required: true, message: this.$t('m.eform.appgroup.verify.groupCode') }]},
          groupDesc: {},
          groupType: {
            initialValue: '1'
          },
          orderNum: {
            initialValue: 1
          },
          isMobile: {
            initialValue: 'false'
          },
          isCommon: {
            initialValue: 'false'
          },
        },
        url: {
          add: YchConstant.PREFIX_EFORM + "/manage/actAppGroup/add",
          edit: YchConstant.PREFIX_EFORM + "/manage/actAppGroup/edit",
          checkCode: YchConstant.PREFIX_EFORM + "/manage/actAppGroup/checkCode",
        },
        expandedRowKeys: [],
        pidField: "parentId",
        isShowParent:true,
        colorList : [{
          key: this.$t('m.common.other.bao-mu'),
          color: '#F5222D'
        }, {
          key: this.$t('m.common.other.huo-shan'),
          color: '#FA541C'
        }, {
          key: this.$t('m.common.other.ri-mu'),
          color: '#FAAD14'
        }, {
          key: this.$t('m.common.other.ming-qing'),
          color: '#13C2C2'
        }, {
          key: this.$t('m.common.other.ji-guang-lv'),
          color: '#52C41A'
        }, {
          key: this.$t('m.common.other.fu-xiao-lan'),
          color: '#1890FF'
        }, {
          key: this.$t('m.common.other.ji-ke-lan'),
          color: '#2F54EB'
        }, {
          key: this.$t('m.common.other.jiang-zi'),
          color: '#722ED1'
        }],
      }
    },
    methods: {
      add(groupType,parentId) {
        if(!groupType){
          groupType = '1';
        }
        let record = {}
        record.groupType = groupType
        if(parentId && parentId!='all'){
          record.parentId = parentId
        }
        record.backgroundColor = this.colorList[0].color

        this.edit(record);
      },
      edit(record) {
        if(record.groupType=='2'){
          if(this.$refs.treeSelect && this.$refs.treeSelect.loadRoot){
            this.$refs.treeSelect.loadRoot()
          }

        }
        this.form.resetFields();
        this.model = Object.assign({}, record);
        if(this.model.groupType=='2'){
          this.isShowParent = true
        }else{
          this.isShowParent = false
        }
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(this.lodash.pick(this.model, 'parentId', 'groupName', 'groupCode', 'groupDesc', 'orderNum', 'isMobile', 'isCommon'))
        })
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.id) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
              method = 'put';
            }
            let old_pid = this.model[this.pidField]
            let formData = Object.assign(this.model, values);
            let new_pid = this.model[this.pidField]
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.messageUtil.success(res.message);
                that.submitSuccess(formData, old_pid == new_pid)
              } else {
                that.messageUtil.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }

        })
      },
      handleCancel() {
        this.close()
      },
      submitSuccess(formData, flag) {
        this.$emit('ok', formData, flag);
      },
      getExpandKeysByPid(pid, arr, all) {
        if (pid && arr && arr.length > 0) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].key == pid) {
              this.expandedRowKeys.push(arr[i].key)
              this.getExpandKeysByPid(arr[i]['parentId'], all, all)
            } else {
              this.getExpandKeysByPid(pid, arr[i].children, all)
            }
          }
        }
      },
      checkCode(rule, value, callback) {
        if (!value) {
          callback();
          return;
        }
        let reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
        if(reg.test(value)){
          callback(this.$t('m.common.tip.code_format'))
          return
        }
        getAction(this.url.checkCode, {
          value: value,
          id: this.model.id,
          groupType: this.model.groupType
        }).then((res) => {
          res.success ? callback() : callback(res.message);
        });
      },
      changeColor(color){
        this.model.backgroundColor = color
      }
    }
  }
</script>
<style lang="less" scoped>
  .setting-drawer-theme-color-colorBlock {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    float: left;
    cursor: pointer;
    margin-top: 10px;
    margin-right: 8px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    color: #fff;
    font-weight: 700;
  }

  .setting-drawer-theme-color-colorBlock i {
    font-size: 14px;
  }

</style>
